<template>
  <div class="home">
    <!-- 搜索栏 -->
    <van-search
      v-model="value"
      show-action
      label="地址"
      placeholder="请输入搜索关键词"
    >
      <template #action>
        <div>搜索</div>
      </template>
    </van-search>
    <!-- 轮播 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe>
    <!-- 导航栏 -->
    <van-grid :column-num="3">
      <van-grid-item icon="hot-o" text="找沙发" @click="toSofa"/>
      <van-grid-item icon="other-pay" text="找床位" @click="toBed"/>
      <van-grid-item icon="apps-o" text="更多" />
    </van-grid>
    <!-- 部分商品列表 -->
    <van-divider>猜你喜欢</van-divider>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in list" :key="item">
        <van-card
          num="2"
          price="2.00"
          desc="描述信息"
          title="商品标题"
          thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
        >
          <template #tags>
            <van-tag plain type="danger">套餐</van-tag>
            <van-tag plain type="danger">优惠券</van-tag>
          </template>
        </van-card>
      </van-cell>
    </van-list>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      value: '',
    }
  },
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 5; i++) {
          this.list.push(this.list.length + 1)
        }
        // 加载状态结束
        this.loading = false
        // 数据全部加载完成
        if (this.list.length >= 10) {
          this.finished = true
        }
      }, 1000)
    },
    toSofa() {
      this.$router.push('/sofa')
    },
    toBed() {
      this.$router.push('/bed')
    },
  },
}
</script>

<style>
  .my-swipe{
    background-color: red;
  }
</style>
